<template>
 
    <el-drawer
    v-model="drawer"
    title="I am the title"
    :direction="direction"
    :before-close="handleClose"
  >
  <el-form style="max-width: 460px" :model="data">
            <div style="margin: 20px" />
            <el-form-item>
                <!-- 使用data对象和form进行数据的双向绑定 -->
                <el-input class="w-50 m-2" placeholder="请输入账户名" v-model="data.adminname" />
            </el-form-item>

            <el-form-item>
                <el-input class="w-50 m-2" placeholder="请输入密码" type="password" v-model="data.password" />
            </el-form-item>

            <el-select v-model="data.role" class="m-2" placeholder="Select" size="large">
                <el-option  label="管理员" value="1" />
                <el-option  label="超级管理员" value="2" />
            </el-select>

            <!-- 树形结构 -->
            <el-tree ref="treeRef" :data="grantData" show-checkbox default-expand-all node-key="menuid"
                highlight-current @check="getCheckedKeys" />

            <el-form-item>
                <el-button type="primary" @click="goAddAdmin">添加管理员</el-button>
                <el-button type="primary">取消</el-button>
            </el-form-item>
        </el-form>
  </el-drawer>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus';
import type {ElTree} from "element-plus";
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type";
import {addAdminApi} from "@/api/admin";
import type {IAddAdmin} from "@/mytype/index"




/* 定义drawer */
const drawer = ref(false);
const direction = ref('rtl');
/* 关闭drawer */
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否关闭?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
/* 子组件声明事件关闭抽屉 */
let emit = defineEmits(["closeDrawer"]);

const data = reactive<IAddAdmin>({
    adminname: "",
    password: "",
    role: "",
    checkedKeys:[]
})

/* 权限处理 */
interface Tree {
    menuid:string,
    label: string,
    children?: Array<Tree>
}

const treeRef = ref<InstanceType<typeof ElTree>>()

const grantData: Tree[] = [
    {
        menuid: "0-0",
        label: "系统首页"
    },
    {
        menuid: "0-1",
        label: "轮播图管理",
        children: [
            {
                menuid: "0-1-0",
                label: "轮播图列表"
            }
        ]
    },
    {
        menuid: "0-2",
        label: "产品管理",
        children: [
            {
                menuid: "0-2-0",
                label: "产品列表"
            },
            {
                menuid: "0-2-1",
                label: "秒杀列表"
            },
            {
                menuid: "0-2-2",
                label: "推荐列表"
            },
            {
                menuid: "0-2-3",
                label: "筛选列表"
            }
        ]
    },
    {
        menuid: "0-3",
        label: "账户管理",
        children: [
            {
                menuid: "0-3-0",
                label: "用户列表"
            },
            {
                menuid: "0-3-1",
                label: "管理员列表"
            }
        ]
    },
    {
        menuid: "0-4",
        label: "数据可视化",
        children: [
            {
                menuid: "0-4-0",
                label: "echarts使用示例"
            },
            {
                menuid: "0-4-1",
                label: "antv-g2使用示例"
            },
            {
                menuid: "0-4-2",
                label: "antdcharts"
            }
        ]
    },
    {
        menuid: "0-5",
        label: "编辑器",
        children: [
            {
                menuid: "0-5-0",
                label: "富文本编辑器"
            },
            {
                menuid: "0-5-1",
                label: "markdown编辑器"
            }
        ]
    },
    {
        menuid: "0-6",
        label: "导入以及导出",
        children: [
            {
                menuid: "0-6-0",
                label: "导出excel"
            },
            {
                menuid: "0-6-1",
                label: "导出excel"
            }
        ]
    },
    {
        menuid: "0-7",
        label: "使用地图",
        children: [
            {
                menuid: "0-7-0",
                label: "百度地图"
            },
            {
                menuid: "0-7-1",
                label: "高德地图"
            },
            {
                menuid: "0-7-2",
                label: "腾讯地图"
            }
        ]
    },
    {
        menuid: "0-8",
        label: "客服",
       
    },
    
]

/* 点击添加管理员 */
function goAddAdmin(){
    console.log("data", data);
    addAdminApi(data)
    .then((res:any)=>{
        if (res.code === "200"){
            console.log("res", res);
            
            ElMessageBox({
                message:"添加成功！",
                type:"success"
            });
            emit("closeDrawer");
        }
    })
}
function getCheckedKeys(){
    console.log("treeRef.value!.getCheckedKeys(false)", treeRef.value!.getCheckedKeys(false));
    
    data.checkedKeys = treeRef.value!.getCheckedKeys(false);
}
</script>

<style>

</style>